<template>
       <div >
      <!-- 动态资源  -->
      <el-card class="cardbox" :style="{ marginBottom: '10px' }" shadow="always">
          <span  :style="{ fontSize:'20px' }">资源动态</span>
      </el-card>
      <!-- 里面的内容 -->
      <el-card class="body-box" shadow="always">
       <div>
     <el-form inline>
        <el-form-item>
          <el-input :prefix-icon="Search"/>
        </el-form-item>
        <el-button type="primary" :style="{marginBottom:'18px'}" >搜索</el-button>
       <!-- 右边的二级列表 -->
      <!-- <el-form :inline="true" class="demo-form-inline" :style="{float:'right'}" ,marginRight: '10px'> -->
      <el-form-item label="资源类型：" :style="{marginLeft:'40px' }">
        <el-select 
        v-model="categoryList"
        placeholder="全部资源">
          <el-option 
           v-for="item in categoryList2"
           :label="item.name"
           :value="item.id"
           :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select placeholder="全部"
        v-model="category2Change"
        >
            <el-option
            v-for="item in categoryList3"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
    <!-- </el-form> -->
      </el-form>
       </div>
       <!-- 内容下的表格 -->
       <div class="datafrom">
    <el-table :data="tableData" :show-header="true"  :style="{background:'darkgray'}"  >
    <el-table-column prop="date" label="内容" width="300" />
    <el-table-column prop="name" label="发布时间" width="180" />
    <el-table-column prop="address" label="数据" />
    <el-table-column prop="address" label="状态" />
    <el-table-column prop="address" label="操作" />
  </el-table>
       </div>
      </el-card>
    </div>
</template>
    
<script lang="ts">
 import { Search } from '@element-plus/icons-vue'
 import { left } from '@popperjs/core';
import {ref}from 'vue'
import { defineComponent } from 'vue'
export default defineComponent({
    name: "Resources",
})
</script>
<script setup lang="ts">
// import {  useRouter } from "vue-router";

// const Router=useRouter()
  const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  
]
// 二级联动数据
interface categoryList2Type  {
  name:string;
  id:number
}

const categoryList2 =ref<categoryList2Type[]>([
    {name:'全部资源', id:1001},
    {name:'作品', id:1002},
    {name:'教程',id:1003},
    {name:'动态', id:1004},
    {name:'专题', id:1005},
]);
// 二级联动数据
interface categoryList3Type  {
  name:string;
  id:number
}

const categoryList3 =ref<categoryList3Type[]>([
    {name:'全部', id:1001},
    {name:'已发布', id:1002},
    {name:'未发布',id:1003},
    {name:'审核中', id:1004},
    {name:'审核未通过', id:1005},
    {name:'仅主页可见', id:1006},
]);

// 定义初始值
const categoryList = ref<number[]>([])
const category2Change=ref<number[]>([])
</script>
    
<style lang='scss' scoped>
  .as-a-whole{
      // width: 1300px;
      margin: 0 auto; 
  }
  .cardbox {
    height: 72px;
    margin-bottom: 10px;
    align-content: center;
  }
  .body-box{
      margin-bottom: 10px;
      min-height: 700px;
  }
</style>
    